<template>
	<view class="list-box">
		<view class="item" v-for="(item,index) in list" :key="index">
			<image :src="item.crackUserInfo?item.crackUserInfo.avatar:item.userInfo.avatar" mode=""></image>
			<view class="text">
				<view class="left">
					<view class="name">
						{{item.crackUserInfo?item.crackUserInfo.nickname:item.userInfo.nickname}}
					</view>
					<view class="msg">
						{{$u.timeFormat(item.add_time, 'yyyy-mm-dd hh:MM:ss')}} {{msg}}
					</view>
				</view>
				<slot name="btn" :item='item'></slot>
				
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	const emits = defineEmits();
	let props = defineProps({
			list:{
				type:Array,
				default:[]
			},
			msg:{
				type:String,
				default:'破解该题目'
			}
		});
		
</script>

<style lang="scss" scoped>
	.list-box{
		padding:28rpx;
		.item{
			display: flex;line-height: 1;align-items: center;
			padding:24rpx 0; 
			&:nth-child(1){
				padding-top:0;
			}
			image{
				width:88rpx;height:88rpx;
				border-radius: 80rpx;
				margin-right:20rpx;
			}
			.text{
				flex:1;
				display: flex;align-items: center;
				.left{
					flex:1;
					.name{
						font-size: 28rpx;font-weight: bold;
					}
					.msg{
						font-size: 22rpx;
						color:#838A99;margin-top: 16rpx;
					}
				}
				.btn{
					width: 144rpx;
					line-height: 56rpx;
					background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: bold;
					color:#fff;
				}
			}
		}
	}
</style>